<template>
    <div>
        <h5>发现好菜</h5>
        <div v-for="food in selectedFoods" :key="food.name" class="box">
            <div class="text">
                <span>{{ food.name }}</span>
                <div class="main">
                    <span>月售:</span>
                    <span>{{ food.sales }}</span>
                </div>
                <div class="rich">
                    <span>￥{{ food.price }}</span>
                </div>
                <div class="button">
                    <button>立即下单</button>
                </div>
            </div>
            <div class="img" :style="{ backgroundImage: `url(${food.img})` }"></div>
        </div>
    </div>
</template>

<style lang="less" scoped>
h5 {
    font-size: 16px;
    margin-top: 30px;
}
.box {
    width: 100%;
    height: 150px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    .text {
        margin-top: 10px;
        margin-left: 15px;
        span {
            font-size: 16px;
            font-weight: bold;
        }
        .main span {
            font-size: 12px;
            margin-right: 5px;
            color: #c4c4c4;
        }
        .rich span {
            font-size: 14px;
            color: red;
        }
        .button button {
            font-size: 14px;
            background-color: #1EC28A;
            color: #ffffff;
            margin-top: 15px;
            border-radius: 16px;
            width: 86px;
            height: 30px;
        }
    }
    .img {
        width: 150px;
        height: 150px;
        border-radius: 16px;
        background-size: cover;
        background-position: center;
    }
}
</style>

<script>
export default {
    data() {
        return {
            allFoods: [
                { name: '巴利甜甜蛋糕', sales: 300, price: 150.99, img: 'https://img0.baidu.com/it/u=2245112053,2434191479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333' },
                { name: '草莓蛋糕', sales: 100, price: 190.99, img: 'https://img1.baidu.com/it/u=995757701,2917929076&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666' },
                { name: '意式披萨', sales: 600, price: 32.99, img: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00279-603.jpg' },
                { name: '法式披萨', sales: 300, price: 29.99, img: 'https://img1.baidu.com/it/u=3058195017,588672346&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500' },
                { name: '麻辣烫', sales: 1099, price: 18.99, img: 'https://img0.baidu.com/it/u=42964131,4203922624&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' },
                { name: '快餐便当', sales: 800, price: 12.99, img: 'https://img2.baidu.com/it/u=1789587189,1146745956&fm=253&fmt=auto?w=1200&h=800' },
            ],
            selectedFoods: []
        }
    },
    mounted() {
        this.getRandomFoods();
    },
    methods: {
        getRandomFoods() {
            // 随机选择两个不同的数据
            const shuffled = this.allFoods.sort(() => 0.5 - Math.random());
            this.selectedFoods = shuffled.slice(0, 2);
        }
    }
}
</script>
